<template>
  <div class="filterBox">
    <div class="flex">
      <div class="flex filterItem">
        <span class="filterName">历史文件</span>
      </div>
    </div>
    <div class="flex">
      <div class="flex filterItem">
        <span class="filterName" />
        <el-input
          v-model="localQuery.fileName"
          placeholder="请输入文件名"
          @input="emitSearch"
        />
      </div>

      <div class="flex filterItem">
        <span class="filterName" />
        <el-date-picker
          v-model="localQuery.dateRange"
          class="w-[240px]!"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="emitSearch"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch } from "vue";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({ fileName: "", dateRange: [] })
  }
});

const emit = defineEmits(["update:modelValue", "search"]);

const localQuery = reactive({ ...props.modelValue });

// 双向绑定
watch(
  () => localQuery,
  val => {
    emit("update:modelValue", val);
  },
  { deep: true }
);

function emitSearch() {
  emit("search", localQuery);
}
</script>
